<template>
	<view class="container">
		<uni-forms class="qw-form" :modelValue="formData" border>
			<uni-forms-item label="accessToken" label-width="100" name="access_token" label-align="left">
				<uni-easyinput type="text" :inputBorder="false" v-model="formData.access_token" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="企业Ticket" label-width="100" name="jsapi_ticket" label-align="left">
				<uni-easyinput type="text" :inputBorder="false" v-model="formData.jsapi_ticket" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="应用Ticket" label-width="100" name="agent_ticket" label-align="left">
				<uni-easyinput type="text" :inputBorder="false" v-model="formData.agent_ticket" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item label="signUrl" label-width="100" name="signUrl" label-align="left">
				<uni-easyinput type="text" :inputBorder="false" v-model="formData.signUrl" placeholder="请输入" />
			</uni-forms-item>
			<uni-forms-item></uni-forms-item>
		</uni-forms>

		<view>
			<u-row gutter="10" justify="space-between">
				<u-col span="6">
					<view class="demo-layout bg-purple">
						<button @click="submitForm" type="primary">企微接口测试</button>
					</view>
				</u-col>
				<u-col span="6">
					<view class="demo-layout bg-purple-light">
						<button @click="previewImage" type="primary">预览图片</button>
					</view>
				</u-col>
			</u-row>
		</view>

		<view class="u-page__upload-item">
			<u-upload :fileList="problemPicFileList" name="uploadPicture" multiple :maxCount="0" :previewFullImage="true"></u-upload>
		</view>
		<view class="">
			<img id="testimage" src="" alt="" width="100px" sizes="" srcset="" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				access_token: '',
				jsapi_ticket: '',
				agent_ticket: '',
				signUrl: ''
			},
			isios:false, //是否是ios系统
			problemPicFileList: [] //照片路径
		};
	},
	onReady() {},
	onShow() {
		let that = this
		uni.getSystemInfo({
			success(e) {
				const userAgent = e.ua;
				let platform = e.platform;
				if (platform.toLowerCase() == 'android') {
					that.isios = false;
				}
				if (platform.toLowerCase() == 'ios') {
					that.isios = true;
				}
				if (userAgent.includes('wxwork')) {
					console.log('我在企微中运行：' + userAgent)
				} else {
					console.log('我不在企微中运行：' + userAgent)
				}
				console.log('success :', e);
			},
			complete(e) {
				console.log('complete :', e);
			}
		});

		let qwtestForm = JSON.parse(uni.getStorageSync('qwtest'));
		let { access_token, jsapi_ticket, agent_ticket, signUrl } = qwtestForm;
		this.formData.jsapi_ticket = jsapi_ticket;
		this.formData.agent_ticket = agent_ticket;
		this.formData.signUrl = signUrl;
		this.formData.access_token = access_token;

		return;
	},
	methods: {
		async submitForm() {
			let jsapi_ticket = '';
			let agent_ticket = '';
			let that = this;
			
			this.$api.getJsApiTicket().then((res)=>{
				jsapi_ticket = res.Ticket
				that.formData.jsapi_ticket = jsapi_ticket;
				
				that.$api.getAgentTicket().then((res)=>{
					agent_ticket = res.Ticket
					that.formData.agent_ticket = agent_ticket;
					
					uni.setStorageSync('qwtest', JSON.stringify(that.formData));
					that.importQwJsSdk(that.qwJsApiTest);
				}).catch((errors)=>{
				});
			}).catch((errors)=>{
			});
		},
		previewImage() {
			wx.previewImage({
				current: 'http://images.china.cn/site1000/2019-07/11/6d980964-4aee-4287-a91c-98dffdc252d2.jpg', // 第一张显示的图片链接
				urls: ['http://images.china.cn/site1000/2019-07/11/6d980964-4aee-4287-a91c-98dffdc252d2.jpg'] // 需要预加载的图片http链接列表，预加载后，可以滑动浏览这些图片
			});
		},
		importQwJsSdk(callback) {
			const script1 = document.createElement('script');
			script1.setAttribute('type', 'text/javascript');
			script1.setAttribute('referrerpolicy', 'origin');
			script1.setAttribute('src', 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js');

			script1.onload = () => {
				const script2 = document.createElement('script');
				script2.setAttribute('type', 'text/javascript');
				script2.setAttribute('referrerpolicy', 'origin');
				script2.setAttribute('src', 'https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js');

				script2.onload = () => {
					const script3 = document.createElement('script');
					script3.setAttribute('type', 'text/javascript');
					script3.setAttribute('referrerpolicy', 'origin');
					script3.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js');

					script3.onload = () => {
						callback();
					};
					document.head.appendChild(script3);
				};
				document.head.appendChild(script2);
			};
			script1.onerror = () => {
				console.error('js文件加载失败!');
			};
			document.head.appendChild(script1);
		},
		qwJsApiTest() {
			let { jsapi_ticket, agent_ticket, access_token } = this.formData;
			// const agent_ticket = 'ShrJyMb0FsH2nHkNqwdMfg==';
			// const jsapi_ticket = 'O3SMpm8bG7kJnF36aXbe89lr4AnmCzHK-zLiwt-0l4BKRLi_6xfrGUXQNL4kydYH1YxvHnu0RJuEYL2zjEXq0Q';

			const corpid = 'ww3de4d7197f8aa5b7';
			const agentid = 1000019;
			const corpsecret = '';
			const noncestr = 'gflymob';
			const timestamp = Date.now();
			const signUrl = location.href.split('#')[0];
			// const signUrl = 'http://127.0.0.1:5500/src/wxwork/wxTest.html';
			// const signUrl = 'https://www.ganfeng-li.com:8899'

			// 要签名的数据
			const data = `jsapi_ticket=${jsapi_ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${signUrl}`;
			// 进行 SHA-1 签名
			const hash = CryptoJS.SHA1(data);
			// 将签名结果转换为字符串
			const signature = hash.toString(CryptoJS.enc.Hex);
			wx.config({
				beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
				debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: corpid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
				timestamp: timestamp, // 必填，生成签名的时间戳
				nonceStr: noncestr, // 必填，生成签名的随机串
				signature: signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
				jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage'] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
			});

			// 要签名的数据
			const agentData = `jsapi_ticket=${agent_ticket}&noncestr=${noncestr}&timestamp=${timestamp}&url=${signUrl}`;
			// 进行 SHA-1 签名
			const agentHash = CryptoJS.SHA1(agentData);
			// 将签名结果转换为字符串
			const agentSignature = agentHash.toString(CryptoJS.enc.Hex);

			let that = this;
			wx.ready(function () {
				wx.checkJsApi({
					jsApiList: ['chooseImage'], // 需要检测的JS接口列表
					success: function (res) {
						let checkResult = res.checkResult;
						if (checkResult) {
							wx.chooseImage({
								count: 5, // 默认9
								sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
								defaultCameraMode: 'normal', //表示进入拍照界面的默认模式，目前有normal与batch两种选择，normal表示普通单拍模式，batch表示连拍模式，不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值，其中front表示默认为前置摄像头单拍模式，batch_front表示默认为前置摄像头连拍模式。（注：用户进入拍照界面仍然可自由切换两种模式）
								isSaveToAlbum: 1, //整型值，0表示拍照时不保存到系统相册，1表示自动保存，默认值是1
								success: function (res) {
									var localIds = res.localIds; // 返回选定照片的本地ID列表，
									// andriod中localId可以作为img标签的src属性显示图片；
									// iOS应当使用 getLocalImgData 获取图片base64数据，从而用于img标签的显示（在img标签内使用 wx.chooseImage 的 localid 显示可能会不成功）
									let localId = localIds[0];

									let testimage = document.getElementById('testimage');
									testimage.src = localId;

									let tempProblemPicFileList = [];
									tempProblemPicFileList.push({
										url: localId
									});
									that.problemPicFileList = tempProblemPicFileList;

									wx.uploadImage({
										localId: localIds, // 需要上传的图片的本地ID，由chooseImage接口获得
										isShowProgressTips: 1, // 默认为1，显示进度提示
										success: function (res) {
											var serverId = res.serverId; // 返回图片的服务器端ID
											console.log('附件ID' + serverId);
										}
									});
								}
							});
						}
						// 以键值对的形式返回，可用的api值true，不可用为false
						// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
					}
				});
				// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			});

			wx.error(function (res) {
				// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
			});
		}
	}
};
</script>

<style></style>
